<template>
  <div class="RetrievePinMain" >
    <!-- 第一步 -->
    <div class="list" @keyup.13="keyupPin1($event)" v-show= "isFindPin">
      <ul>
        <li>
          <label v-show="AreaCodeData !== '' ">{{lang['loginPhoneNumer']}}</label>
          <label v-show="AreaCodeData === '' ">{{lang['basic_postbox']}}</label>
          <input type="text" name="" :value="this.phone_emali" disabled="disabled">
        </li>

        <li>
          <label v-show="AreaCodeData !== '' ">{{lang['smsAuthenticationCode']}}</label>
          <label v-show="AreaCodeData === '' ">{{lang['mailboxVerificationCode']}}</label>
          <input type="text" name="" maxlength="6" value="" class="inptYz" v-model="verifyCode" ref="verifyCode" :placeholder="lang['register_PleaseerificationCode']" >
          <a class="countryAreaNo">
            <span v-if="sendMsgDisabled" style="color:rgba(255,255,255,.7);">{{lang['register_ClickGett']}}({{time}})</span>
            <span v-if="!sendMsgDisabled" v-bind:class="{colorActive: !isSendSMS}" @click="sendphone">{{lang['register_ClickGet']}}</span>
          </a>
        </li>
        <li>
          <button type="button" class="submitBtn" v-bind:class="{ active: !isSubmitBtnCheck }" @click="submitFindPin">
            {{lang['NextStep']}}
          </button>
        </li>
      </ul>
    </div>
    <!--第二步-->
    <div class="list" @keyup.13="keyupPin2($event)" v-show= "!isFindPin">
      <ul>
        <li>
          <label>{{lang['new capital cipher']}}</label>
          <input type="password" maxlength="6" :placeholder="lang['pleaseEnterNewsAFundPassword']" v-model="password" ref="password" @input="changePassword">
        </li>

        <li>
          <label>{{lang['confirmation PIN code']}}</label>
          <input type="password" maxlength="6" name="" value="" v-model="password2" ref="password2" :placeholder="lang['register_PleaseconfirmPassword PIN password']">
        </li>
        <li>
          <button type="button" class="submitBtn" v-bind:class="{ active: !isSubmitBtnCheck }"  @click="submitFindPin2">
            {{lang['determineBth']}}
          </button>
        </li>
      </ul>
    </div>
    <!-- 弹窗 提示-->
    <SwModal :isShow.sync="findPinshowModal" modalClass="userModal smallModal" :isShowBg="true" :isCloseOnClickBg="true" :onClosed="onClosed" :okText="lang['determineBth']" :ok="monyBtndetermine">
      <div class="successfulOperation">
        <p>{{lang['fund password modified successfully']}}</p>
      </div>
    </SwModal>
    <!-- 弹窗 提示-->

  </div>
</template>
<script>
import SwModal from '@/components/SwModal'
import ModalApi from '@/components/SwModal/api.js'
import EventBus from '@/service/EventBus.js'
import CheckInput from '@/utils/CheckInput.js'
import rules from '@/utils/rules.js'

export default {
  props: [
    'lang',
    'langKey',
    'getCustomer'
  ],
  data () {
    return {
      time: 60,
      sendMsgDisabled: false,
      verifyCode: '',
      phone_emali: '',
      AreaCodeData: '',
      sendCodeulr: '',
      isSendSMS: true,
      isSubmitBtnCheck: true,
      findPinshowModal: false,
      password: '',
      password2: '',
      isFindPin: true
    }
  },
  components: {
    SwModal
  },
  methods: {
    // 发送验证码
    sendphone () {
      if (!this.isSendSMS) {
        return
      }
      this.isSendSMS = false

      if (this.AreaCodeData) {
        this.sendCodeulr = 'Security/SendSmsByCode'
      } else {
        this.sendCodeulr = 'Security/SendMailByCode'
      }

      this.$http.post(this.sendCodeulr, {
        AreaCode: this.AreaCodeData,
        VerifyDeviceType: 0,
        VerifyCode: '',
        PhoneOrEmail: this.phone_emali,
        BussinessType: 20,
        LanguageCode: this.langKey
      }, {
        modalOptions: {
          modalClass: 'userModal'
        }
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          // 倒计时
          let me = this
          me.sendMsgDisabled = true
          let interval = window.setInterval(() => {
            if ((me.time--) <= 0) {
              me.time = 60
              me.sendMsgDisabled = false
              window.clearInterval(interval)
            }
          }, 1000)
          // 倒计时
          ModalApi.message(this.lang['VerificationCodeSuccessful'], '', '', 'userModal')
        }
        this.isSendSMS = true
      })
    },
    keyupPin1 (ev) {
      if (ev.keyCode === 13) {
        this.submitFindPin()
      }
    },
    submitFindPin () {
      if (!this.isSubmitBtnCheck) { return }

      // 验证码是否为空
      this.checkHandle.chackByIdsInOrder(['verifyCode'])
      .then((info) => {
        if (!info.isValid) {
          ModalApi.message(info.error(), '', '', 'userModal')
          return
        }
        this.isSubmitBtnCheck = false
        this.$http.post('Security/VerifyCode', {
          code: this.verifyCode,
          bussinessType: 20
        }, {
          modalOptions: {
            modalClass: 'userModal'
          }
        })
        .then((res) => {
          if (res.StatusCode === '200') {
            this.sendMsgDisabled = false
            this.isFindPin = !this.isFindPin
          }
          this.isSubmitBtnCheck = true
        })
      })
      .catch((info) => {
      })
    },
    // 第二步骤
    changePassword () {
      let phoneInput = this.$refs.password
      let value = phoneInput.value
      let password = value.replace(/\D/g, '')
      phoneInput.value = password
      this.password = password
    },
    keyupPin2 (ev) {
      if (ev.keyCode === 13) {
        this.submitFindPin2()
      }
    },
    submitFindPin2 () {
      if (!this.isSubmitBtnCheck) { return }

      // 验证码是否为空
      this.checkHandle.chackByIdsInOrder(['password', 'password2'])
      .then((info) => {
        if (!info.isValid) {
          ModalApi.message(info.error(), '', '', 'userModal')
          return
        }

        this.isSubmitBtnCheck = false
        this.$http.post('Security/ChangeSafePwd', {
          newPwd: this.password,
          pin: this.verifyCode
        }, {
          modalOptions: {
            modalClass: 'userModal'
          }
        })
        .then((res) => {
          if (res.StatusCode === '200') {
            this.verifyCode = ''
            this.password = ''
            this.password2 = ''
            EventBus.$emit('isShowForgerPin', false)
            this.isFindPin = true
            this.findPinshowModal = !this.findPinshowModal
          }
          this.isSubmitBtnCheck = true
        })
      })
      .catch((info) => {
      })
    },
    monyBtndetermine () {
      this.findPinshowModal = false
    },
    onClosed () {

    },
    getCustomerList () {
      if (this.getCustomer.Phone) {
        this.phone_emali = this.getCustomer.Phone
        this.AreaCodeData = this.getCustomer.AreaCode.substring(1)
      } else {
        this.phone_emali = this.getCustomer.Email
        this.AreaCodeData = ''
      }
    }
  },
  watch: {
    getCustomer () {
      this.getCustomerList()
    }
  },
  mounted () {
    let that = this
    this.checkHandle = new CheckInput({
      rules: rules,
      trimValue (val, item) {
        return val.replace(/^\s+|\s+$/, '')
      },
      list: [
        {
          id: 'password',
          input: that.$refs.password,
          rules: [
            {
              rule: 'required',
              error () {
                return that.lang['pleaseEnterNewsAFundPassword']
              }
            },
            {
              rule (val) {
                return that.password.length === 6
              },
              error () {
                return that.lang['register_passwordHint Asset']
              }
            }
          ]
        },
        {
          id: 'password2',
          input: that.$refs.password2,
          rules: [
            {
              rule: 'required',
              error () {
                return that.lang['register_PleaseconfirmPassword PIN password']
              }
            },
            {
              rule (val) {
                return that.password === that.password2
              },
              error () {
                return that.lang['pin settings are inconsistent'] // PIN设置不一致
              }
            }
          ]
        },
        {
          id: 'verifyCode',
          input: that.$refs.verifyCode,
          rules: [
            {
              rule: 'required',
              error () {
                return that.lang['register_PleaseerificationCode']
              }
            }
          ]
        }
      ]
    })
  }
}
</script>

<style lang="less">

.RetrievePinMain{
  padding-bottom: 20px;

  .list{
    width: 420px;
    margin: 0 auto ;
    li{
      position: relative;

      label{
        display: block;
        padding: 15px 10px 5px;
        height: 20px;
        line-height: 20px;
        color: #fff;
      }
      input{
        padding: 0 10px;
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-radius: 2px;
        box-sizing: border-box;
        background-color: #2A3440;
        color: #fff;
        font-size: 12px;
      }
      .inptYz{
        padding-right: 120px;
      }
      .countryAreaNo {
        position: absolute;
        top: 40px;
        right: 0;
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #fff;

        span{
          display: block;
          font-size: 12px;
          &.colorActive {
            color: #ccc
          }
        }

        &:after{
          content: "";
          position: absolute;
          left: 0;
          top: 10px;
          display: block;
          width: 1px;
          height: 20px;
          border-right: solid 1px #B1BBC2;
        }
      }
      .submitBtn {
        width: 50%;
        display: block;
        height: 40px;
        line-height: 40px;
        margin: 20px auto 0;
        text-align: center;
        background: #3782FF;
        color: #fff;
        font-size: 12px;
        border-radius: 2px;
        cursor: pointer;
        &.active{
          background-color: #2A3441;
          cursor:not-allowed;
        }
      }
    }
  }
}
</style>
